import React, { useState, useEffect } from 'react';

import { useHook, timeHook } from "../../../hooks"
import './CardList.less'
export default function(props){
  const [state, setState] = useState()
  const [count, setCount] = useState(10)
// let count = useHook(10)
// const [d, h, m, s] = timehook();
  const [name, setName] = useState('抢购')

  useEffect(() => {
    if(count > 0) {
        setTimeout(() => {
            setCount(count -1 )
        }, 1000)
    }
  }, [count])

  return (
    <div style={{background: '#fff6f2', 
            height: '100px', width: '320px', 
            margin: '10px', padding: '2px 10px 10px 10px'
    }} >
        <div style={{display: 'flex'}} > 
            <div style={{marginTop: '3px'}} > <img src={props.item.brandLogo} style={{width: '20px', height: '20px'}} /> </div>
            <div style={{fontSize: '12px'}} > {props.item.brandName} </div>
        </div> 

        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}  > 

            <div> <img src={props.item.campImage} style={{width: '65px', height: '65px'}} /> </div>

            <div style={{  }} > 
                <div> { Array.isArray(props.item.promoLogo) ? (
                    <div> 
                        <img src={props.item.promoLogo[0]} style={{width: '30px', height: '10px'}} /> 
                        {props.item.promoLogo[1] ? <img src={props.item.promoLogo[1]} style={{width: '30px', height: '10px'}} /> : null }
                    </div>
                ) : (
                    <img src={props.item.promoLogo} style={{width: '30px', height: '10px'}} />
                ) } </div>

                <div style={{ fontWeight: '700', marginBottom: '2px' }} > {props.item.voucherDesc} </div>
                <div> {props.item.benefitAmount} </div>
            </div>


            <div style={{ width: '50px' }} > 
              <div style={{
                  width: '50px',
                  height: '25px',
                  background: '#ff4217',
                  borderRadius: '15px',
                  color: '#fff',
                  textAlign: 'center',
                  lineHeight: '25px',
                  cursor: 'pointer',
                  fontSize: '12px'
              }} >  {count > 0 ?  <div >{count} S</div> : <div  onClick={() => {
                if(count == 0) {
                    setName("已抢购")
                }
            }} >{name}</div> } </div>
            </div>
        </div> 
    </div>
  )
}